<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>boxy - Facebook-like dialog/overlay, with frills</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script type='text/javascript' src='assets/jquery.js'></script>
    <link rel="stylesheet" href="assets/project-page.css" type="text/css" />
    
    <!-- per Project stuff -->
      <script type='text/javascript' src='javascripts/jquery.boxy.js'></script>
      <link rel="stylesheet" href="stylesheets/boxy.css" type="text/css" />
    <!-- END per project stuff -->
    

  </head>
  <body>
    <div id='container'>
      <h1>
        boxy
        <span class='subtitle'> - Facebook-like dialog/overlay, with frills</span>
      </h1>
      
      <div id='sidebar'>
        <ul id='ohoa-nav'>
          <li><a href='index.html'>Back to documentation &raquo;</a></li>
        </ul>
      </div>
      
      <div id='main'>
        
        <h2>Diagnostics</h2>
        <p>Also uses <code>Boxy.get(this)</code>...</p>
        <ul>
          <li><a href='#' id='diagnostics'>Show diagnostics</a></li>
        </ul>
        
        <h2>AJAX</h2>
        <ul>
          <li><a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a></li>
          <li><a href='#' onclick='Boxy.load("test-2.html", {cache:true});'>Test 2 - cache enabled</a></li>
          <li><a href='#' onclick='Boxy.load("test-3.html", {filter: "#inner"});'>Test 3 - filtering</a></li>
        </ul>
        
        <h2>Actuator</h2>
        <ul>
          <li><a href='#' id='actuator'>Create boxy bound to link below</a></li>
          <li><a href='#' id='actuator-toggle'>Toggle bound boxy</a></li>
        </ul>
        
        <h2>Set Content</h2>
        <ul>
          <li>
            <a href='#' id='set-content-open'>open boxy</a> |
            <a href='#' id='set-content'>set content</a><br/>
            (hover behaviour should continue to work after new content is set)
          </li>
        </ul>
        
        <h2>Callbacks</h2>
        <ul>
          <li>
            <a href='#' id='after-hide'>after hide</a>
          </li>
          <li>
            <a href='#' id='before-unload'>before unload</a> |
            <a href='#' id='before-unload-no-auto-unload'>before unload (no autounload - shouldn't fire)</a>
          </li>
          <li>
            <a href='#' id='after-drop'>after drop</a>
          </li>
          <li>
            <a href='#' id='after-show'>after show</a>
          </li>
        </ul>
        
        <h2>Helpers</h2>
        <ul>
          <li>
            <a href='#' onclick='Boxy.ask("Question", ["A", "B", "C"], function(r) { alert(r); });'>Question, response array</a>
          </li>
          <li>
            <a href='#' onclick='Boxy.ask("Question", {"1":"Yes", "2":"No"}, function(r) { alert(r); });'>Question, response object</a>
          </li>
          <li>
            <a href='#' onclick='Boxy.alert("Alert! Alert!", function() { alert("Alert closed!"); });'>Alert</a>
          </li>
          <li>
            <a href='#' onclick='Boxy.confirm("Please confirm?", function() { alert("Confirmed!"); });'>Confirm</a>
          </li>
        </ul>
        
        <h2>Z-Index</h2>
        <p>Clicking anywhere on the dialogs opened by the link below should bring them to the front.</p>
        <ul>
          <li>
            <a href='#' id='z-index'>click-to-front enabled</a> |
            <a href='#' id='z-index-latest'>bring newest to top</a>
          </li>
        </ul>
        
        <h2>Modals</h2>
        <p>Resize the window, ensure blackout expands.</p>
        <ul>
          <li><a href='#' id='modal'>Open a modal dialog</a></li>
          <li><a href='#' onclick='alert(Boxy.isModalVisible()); return false;'>Test for a visible modal</a></li>
        </ul>
        
        <h2>Show</h2>
        <ul>
          <li>
            <a href='#' id='no-show'>Create, don't show</a> |
            <a href='#' id='no-show-now'>Show now</a>
          </li>
        </ul>
        
      </div>
      
      <script type='text/javascript'>
      
        var diagnose = function(boxy) {
            alert("Position: " + boxy.getPosition() +
                  "\nSize: " + boxy.getSize() +
                  "\nContent size: " + boxy.getContentSize() +
                  "\nCenter: " + boxy.getCenter());
        };
      
        $(function() {
          
          Boxy.DEFAULTS.title = 'Title';
          
          //
          // Diagnostics
          
          $('#diagnostics').click(function() {
              new Boxy("<div><a href='#' onclick='diagnose(Boxy.get(this));'>Diagnose</a></div>");
              return false;
          });
        
          //
          // Set content
          
          var setContent = null;
          $('#set-content-open').click(function() {
              setContent = new Boxy(
                "<div style='background-color:red'>This is content</div>", {
                  behaviours: function(c) {
                    c.hover(function() {
                      $(this).css('backgroundColor', 'green');
                    }, function() {
                      $(this).css('backgroundColor', 'pink');
                    });
                  }
                }
              );
              return false;
          });
          $('#set-content').click(function() {
              setContent.setContent("<div style='background-color:blue'>This is new content</div>");
              return false;
          });
          
          //
          // Callbacks
          
          $('#after-hide').click(function() {
              new Boxy("<div>Test content</div>", {
                afterHide: function() {
                  alert('after hide called');
                }
              });
              return false;
          });
          
          $('#before-unload').click(function() {
              new Boxy("<div>Test content</div>", {
                beforeUnload: function() {
                  alert('before unload called');
                },
                unloadOnHide: true
              });
              return false;
          });
          
          $('#before-unload-no-auto-unload').click(function() {
              new Boxy("<div>Test content</div>", {
                beforeUnload: function() {
                  alert('should not see this');
                },
                unloadOnHide: false
              });
              return false;
          });
          
          $('#after-drop').click(function() {
              new Boxy("<div>Test content</div>", {
                afterDrop: function() {
                  alert('after drop: ' + this.getPosition());
                },
                draggable: true
              });
              return false;
          });
          
          $('#after-show').click(function() {
              new Boxy("<div>Test content</div>", {
                afterShow: function() {
                  alert('after show: ' + this.getPosition());
                }
              });
              return false;
          });
          
          //
          // Z-index
          
          var zIndex = null;
          $('#z-index').click(function() {
              zIndex = new Boxy(
                "<div>Test content</div>", { clickToFront: true }
              );
              return false;
          });
          
          $('#z-index-latest').click(function() {
              zIndex.toTop();
              return false;
          });
          
          //
          // Modals
          
          function newModal() {
              new Boxy("<div><a href='#'>Open a stacked modal</a> | <a href='#' onclick='alert(Boxy.isModalVisible()); return false;'>test for modal dialog</a></div>", {
                modal: true, behaviours: function(c) {
                  c.find('a:first').click(function() {
                    newModal();
                  });
                }
              });
          };
          
          $('#modal').click(newModal);
          
          //
          // No-show
          
          var noShow;
          $('#no-show').click(function() {
              noShow = new Boxy("<div>content</div>", {show: false});
              return false;
          });
          
          $('#no-show-now').click(function() {
              noShow.show();
              return false;
          });
          
          // Actuator
          
          $('#actuator').click(function() {
              var ele = $('#actuator-toggle')[0];
              new Boxy("<div>test content</div>", {actuator: ele, show: false});
              return false;
          });
          $('#actuator-toggle').click(function() {
              Boxy.linkedTo(this).toggle();
              return false;
          });
          
        });
      </script>

    </div>
  </body>
</html>